<div class="monitor-container">
  <div class="page-header">
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <h2>监控指标</h2>
        <p class="text-muted">实时监控集群性能和资源使用情况</p>
      </div>
      <button nbButton status="primary" (click)="loadMetrics()" [disabled]="loading">
        <nb-icon icon="refresh-outline"></nb-icon> 刷新
      </button>
    </div>
  </div>

  <div *ngIf="loading" class="loading-container">
    <nb-spinner size="large" status="primary"></nb-spinner>
    <p>加载监控数据...</p>
  </div>

  <div *ngIf="!loading && metrics">
    <!-- Key Metrics Cards -->
    <div class="row metrics-cards">
      <div class="col-lg-3 col-md-6 col-sm-12">
        <nb-card accent="primary" class="metric-card">
          <nb-card-body>
            <div class="metric-icon">
              <nb-icon icon="activity-outline" status="primary"></nb-icon>
            </div>
            <div class="metric-content">
              <h6 class="metric-label">QPS</h6>
              <h2 class="metric-value">{{ metrics.qps | number:'1.2-2' }}</h2>
              <p class="metric-desc">每秒查询数</p>
            </div>
          </nb-card-body>
        </nb-card>
      </div>

      <div class="col-lg-3 col-md-6 col-sm-12">
        <nb-card accent="success" class="metric-card">
          <nb-card-body>
            <div class="metric-icon">
              <nb-icon icon="checkmark-circle-outline" status="success"></nb-icon>
            </div>
            <div class="metric-content">
              <h6 class="metric-label">查询成功率</h6>
              <h2 class="metric-value">{{ metrics.success_rate | number:'1.2-2' }}%</h2>
              <p class="metric-desc">成功/总查询</p>
            </div>
          </nb-card-body>
        </nb-card>
      </div>

      <div class="col-lg-3 col-md-6 col-sm-12">
        <nb-card accent="warning" class="metric-card">
          <nb-card-body>
            <div class="metric-icon">
              <nb-icon icon="clock-outline" status="warning"></nb-icon>
            </div>
            <div class="metric-content">
              <h6 class="metric-label">P95 延迟</h6>
              <h2 class="metric-value">{{ metrics.query_latency_p95 | number:'1.2-2' }} <small>ms</small></h2>
              <p class="metric-desc">95分位延迟</p>
            </div>
          </nb-card-body>
        </nb-card>
      </div>

      <div class="col-lg-3 col-md-6 col-sm-12">
        <nb-card accent="info" class="metric-card">
          <nb-card-body>
            <div class="metric-icon">
              <nb-icon icon="server-outline" status="info"></nb-icon>
            </div>
            <div class="metric-content">
              <h6 class="metric-label">在线节点</h6>
              <h2 class="metric-value">{{ metrics.backend_alive }} / {{ metrics.backend_total }}</h2>
              <p class="metric-desc">BE节点状态</p>
            </div>
          </nb-card-body>
        </nb-card>
      </div>
    </div>

    <!-- Charts Row 1: QPS/RPS & Latency & Resource -->
    <div class="row chart-row">
      <div class="col-lg-4 col-md-12">
        <nb-card>
          <nb-card-header>
            <h6>QPS & RPS</h6>
            <small class="text-muted">查询和请求速率</small>
          </nb-card-header>
          <nb-card-body>
            <div echarts [options]="qpsRpsChartOption" class="chart"></div>
          </nb-card-body>
        </nb-card>
      </div>

      <div class="col-lg-4 col-md-12">
        <nb-card>
          <nb-card-header>
            <h6>查询延迟 (ms)</h6>
            <small class="text-muted">P50 / P95 / P99</small>
          </nb-card-header>
          <nb-card-body>
            <div echarts [options]="latencyChartOption" class="chart"></div>
          </nb-card-body>
        </nb-card>
      </div>

      <div class="col-lg-4 col-md-12">
        <nb-card>
          <nb-card-header>
            <h6>资源使用率 (%)</h6>
            <small class="text-muted">CPU / 内存 / 磁盘</small>
          </nb-card-header>
          <nb-card-body>
            <div echarts [options]="cpuChartOption" class="chart"></div>
          </nb-card-body>
        </nb-card>
      </div>
    </div>

    <!-- Resource Details Row -->
    <div class="row">
      <div class="col-lg-4 col-md-12">
        <nb-card>
          <nb-card-header>
            <nb-icon icon="cube-outline"></nb-icon>
            JVM 内存
          </nb-card-header>
          <nb-card-body>
            <div class="resource-item">
              <div class="d-flex justify-content-between mb-2">
                <span>总内存</span>
                <strong>{{ formatBytes(metrics.jvm_heap_total) }}</strong>
              </div>
              <div class="d-flex justify-content-between mb-2">
                <span>已用内存</span>
                <strong>{{ formatBytes(metrics.jvm_heap_used) }}</strong>
              </div>
              <div class="d-flex justify-content-between mb-3">
                <span>使用率</span>
                <strong>{{ metrics.jvm_heap_usage_pct | number:'1.2-2' }}%</strong>
              </div>
              <nb-progress-bar 
                [value]="metrics.jvm_heap_usage_pct" 
                [status]="getProgressStatus(metrics.jvm_heap_usage_pct)"
                [displayValue]="true">
              </nb-progress-bar>
            </div>
          </nb-card-body>
        </nb-card>
      </div>

      <div class="col-lg-4 col-md-12">
        <nb-card>
          <nb-card-header>
            <nb-icon icon="hard-drive-outline"></nb-icon>
            存储空间
          </nb-card-header>
          <nb-card-body>
            <div class="resource-item">
              <div class="d-flex justify-content-between mb-2">
                <span>总存储</span>
                <strong>{{ formatBytes(metrics.disk_total_bytes) }}</strong>
              </div>
              <div class="d-flex justify-content-between mb-2">
                <span>已用存储</span>
                <strong>{{ formatBytes(metrics.disk_used_bytes) }}</strong>
              </div>
              <div class="d-flex justify-content-between mb-3">
                <span>使用率</span>
                <strong>{{ metrics.disk_usage_pct | number:'1.2-2' }}%</strong>
              </div>
              <nb-progress-bar 
                [value]="metrics.disk_usage_pct" 
                [status]="getProgressStatus(metrics.disk_usage_pct)"
                [displayValue]="true">
              </nb-progress-bar>
            </div>
          </nb-card-body>
        </nb-card>
      </div>

      <div class="col-lg-4 col-md-12">
        <nb-card>
          <nb-card-header>
            <nb-icon icon="bar-chart-outline"></nb-icon>
            查询统计
          </nb-card-header>
          <nb-card-body>
            <div class="resource-item">
              <div class="d-flex justify-content-between mb-2">
                <span>运行中查询</span>
                <strong>{{ metrics.running_queries }}</strong>
              </div>
              <div class="d-flex justify-content-between mb-2">
                <span>成功查询</span>
                <strong class="text-success">{{ metrics.query_success | number }}</strong>
              </div>
              <div class="d-flex justify-content-between mb-2">
                <span>失败查询</span>
                <strong class="text-danger">{{ metrics.query_err | number }}</strong>
              </div>
              <div class="d-flex justify-content-between">
                <span>总查询</span>
                <strong>{{ metrics.query_total | number }}</strong>
              </div>
            </div>
          </nb-card-body>
        </nb-card>
      </div>
    </div>
  </div>

  <div *ngIf="!loading && !metrics" class="no-data">
    <nb-alert status="info">
      <nb-icon icon="info-outline"></nb-icon>
      暂无监控数据
    </nb-alert>
  </div>
</div>
